<template>
  <div class="home  animate__animated animate__fadeInUp">
     <div id="ProductList-header">
        <p id="ProductList-header2">
          <span>商品列表</span>
        </p>
      </div>
    <el-card shadow="never" >
      <div id="Add_Product">
        <div id="Add_Product_header">
            <span>商品添加编辑</span>
            <span> <el-button round size="mini" icon="el-icon-arrow-left" @click="back">返回</el-button></span>
        </div>
        <div id="Add_Product_body">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!-- 商品分类             -->
            <el-form-item label="商品分类" prop="sortId" id="product_List">
              <el-select v-model="ruleForm.sortId" clearable :placeholder="this.hhh" @change="change2">
              <el-option  v-for="item in options2"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
<!-- 商品类型             -->
            <el-form-item label="商品类型" prop="type" id="product_type">
              <el-radio-group v-model="ruleForm.type">
                <el-radio label="虚拟物品"></el-radio>
                <el-radio label="实物物物品"></el-radio>
              </el-radio-group>
            </el-form-item>
<!-- 请输入商品名称             -->
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请选择商品名称"></el-input>
            </el-form-item>
<!-- 商品售价            -->
            <el-form-item label="商品售价" prop="price" placeholder="请选择商品售价">
              <el-input v-model="ruleForm.price" placeholder="请选择商品售价"></el-input>
            </el-form-item>
<!-- 商品介绍-富文本 -->
            <el-form-item label="商品介绍" prop="introduce">
              <div id="product_introduction" >
              </div>
            </el-form-item>
<!-- 标签 -->
             <el-form-item  id="product_label" label="标签" prop="inputVisible">
               <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm" >
              </el-input>
<!-- 输入标签添加 -->
              <el-button v-else class="button-new-tag" size="small" @click="showInput">输入标签添加</el-button>
            </el-form-item>
<!-- 上传图片 -->
            <el-form-item label="商品头图" prop="product_map" id="product_map">
              <el-upload
                :limit=limitNum
                class="upload-demo"
                action="/gym/uploadImage"
                :on-success="handlePreview"
                :on-preview="handlePreview2"
                :on-remove="handleRemove"
                :file-list="fileList_map"
                list-type="picture"
                name="image">
                <el-button size="small" type="primary">上传图片</el-button>
                <div slot="tip" class="el-upload__tip">最多可以上传1张图片</div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" >
                <!-- <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.image"
                :fit="fits"
              >
              </el-image> -->
              </el-dialog>
            </el-form-item>

<!-- 上传视频 -->
            <el-form-item   label="主图视频" prop="product_video" id="product_video">
             <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="handleChange"
                :file-list="fileList_video">
                <el-button slot="trigger" size="small" type="primary">上传视频</el-button>
                <div slot="tip" class="el-upload__tip">注：视频只能上传mp4格式大小不能不超过50M</div>
                </el-upload>
              </el-form-item>
<!-- 提交 -->
               <el-form-item>
                <el-button   type="primary" @click="submitForm('ruleForm')" id="product_Submit">完成，提交保存</el-button>
                <!-- <el-button id="b2" @click="resetForm('ruleForm')">重置</el-button> -->
              </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
  .flex{
    display: flex;
  }

  #product_Submit{
    margin-right: 10px;
  }
  #b2{
    margin-left: 10px;
  }

  #ProductList-header {
  width: 100%;
  height: 49px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  display: flex;
  background: -webkit-linear-gradient(
    0deg,
    rgba(81, 81, 81, 1) 0%,
    rgba(81, 81, 81, 1) 0%,
    rgba(174, 174, 174, 1) 100%,
    rgba(174, 174, 174, 1) 100%
  );
  #ProductList-header2 {
    display: flex;
    align-items: center;
    span {
      align-items: center;
      padding-left: 10px;
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #999999;
      border-left: rgba(30, 159, 255, 1) solid 4px;
      margin-left: 10px;
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
    }
  }
}
  #product_label{
    text-align: left;
    margin-left: -10px
  }
  #Add_Product_header{
    width: 100%;
    height: 50px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #333333;
    display: flex;
    background: #eeeff2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
    padding-left: 10px;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #999999;
    margin: 0 10px;
    }
  }

  #Add_Product_body{
    width: 60%;
    display: flex;
    margin-top: 50px;
    justify-content: center ;
    margin: 0 auto;
    margin-top: 50px;
  }
// 富文本
  #product_introduction{
    text-align: left;
  }
  /deep/.w-e-toolbar{
    background: #eeeff2 !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  
   .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
// 商品分类
  #product_List{
    text-align: left;
  }
// 商品类型
  #product_type{
    text-align: left;
  }
// 上传图片
  #product_map{
    text-align: left;
  }
// 上传视频
  #product_video{
    text-align: left;
  }
  #product_Submit{
    margin-top: 50px;
  }
</style>
<script>
import E from 'wangeditor'
export default {  
  data(){
    return{
      hhh:"",
      
// 上传视频
      fileList_video: [],
      dialogImageUrl: '',
      dialogVisible: false,
// 上传图片        
      fileList_map: [ ],
      file:[],
      options2:[],
      limitNum:1,
// 15页表单数据
       ruleForm: {
          product_name: '',
          product_List: '',
          product_type: "",
          Unit_Price:'',
          // product_label:"",
          product_map:"",
          // inputValue:"",//产品标签
          dialogImageUrl:"",
          // product_video:""
          strArr:"",//标签
          id:"",
          introduce:"",//产品介绍
          image_url:""
      },
//表单正则
      rules: {
           name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          sortId: [
            { required: true, message: '请选择商品分类',  trigger: 'change' },
          ],
           type: [
            { required: true, message: '请选择商品类型', trigger: 'change' }
          ],
           price:[
             { required: true, message: '请输入商品售价', trigger: 'blur' },
            //  { min: 1, max: 10, message: '长度在 1 到 8 个字符', trigger: 'blur' }
           ],
           introduce:[
            { required: true, message: '请输入商品介绍', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
           ],
          //  product_map:[
          //     { required: true, message: '请设置商品头图', trigger: 'blur' },
          //  ],
          //  product_video:[
          //     { required: true, message: '设置主图视频', trigger: 'blur' },
          //  ]
      },
//219页 标签数据
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
    }
  },
    methods:{
// 返回
    back(){
      this.$router.push('productlist');
    },


// 标签
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

// 上传图片
       handleRemove(file, fileList_map) {
        console.log(file, fileList_map);
      },
      handlePreview(response, file, fileList) {
        console.log(response.data);
        this.image_url=response.data
      },

      handlePreview2(response, file, fileList) {
        console.log(file);
      },

// 上传视频

      handleChange(file, fileList_video) {
        this.fileList_map = fileList_video.slice(-3);
      },
// 提交 
      submitForm(ruleForm) {
          // 富文本验证
          const ftext = this.editor.txt.text().trim() //获取纯文本
          const fhtml = this.editor.txt.html() //获取完整富文本
          if(ftext !=='') { //判断是否为空 editor.txt.text() 和 editor.txt.html()的区别是前者纯文本，而后者有html标签（即使在没有任何内容的时候也会有默认的标签）
              this.ruleForm.introduce = fhtml
          } else {
              this.ruleForm.introduce = ''
          }
          // console.log(this.ruleForm.introduce);
                
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.$axios({
              url:"/gym/goods/update",
              method:"post",
              data:{
                image:this.image_url,
                introduce:this.ruleForm.introduce,//介绍
                name:this.ruleForm.name,
                price:this.ruleForm.price,
                sortId:this.ruleForm.product_List,//商品分类
                status:"1",//上下线
                tag:this.dynamicTags.toString(),
                type:this.ruleForm.type,
                volume:10, //销量
                id:this.ruleForm.id,
              }
            }).then((res)=>{
              if(res.data.error){
                this.$message.erro("修改失败")
              }else{
                this.$message({
                  type:"success",
                  message:"修改成功！"
                })
                if(this.$message.success){
                  this.$router.push("productlist");
                }
                this.get
              }
            })
            } else {
              return false;
            }
        });
      },
      // 商品分类下拉框渲染
      sort_name(){
        this.$axios({
          url:"/gym/sort/list",
        }).then((res)=>{
         this.options2=res.data.data
         for(let i=0;i<this.options2.length;i++){
           if(this.ruleForm.sortId==this.options2[i].id){
             this.hhh=this.options2[i].name
           }
         }
         if(this.ruleForm.product_List==""){
          this.ruleForm.product_List=this.hhh
        }
         console.log(this.options2);
        //  console.log(this.ruleForm.product_List);
        })
      },
      
      change2(index){
        this.ruleForm.product_List=index
        console.log(this.ruleForm.product_List);
      },

// // 重置
//       resetForm(ruleForm) {
//         this.$refs[ruleForm].resetFields();
//         this.$refs[ruleForm].resetFields();
//       }
    },
    mounted() {
// 富文本
      const editor = new E("#product_introduction");
      editor.config.placeholder = '添加商品添加';
      editor.config.focus = false;
      this.editor=editor;
      editor.config.showFullScreen = false;;
      editor.create();

      this.sort_name();

// sessionStorage.getItem
      this.ruleForm=sessionStorage.getItem("ruleFormVal");
      this.ruleForm=JSON.parse(this.ruleForm);
      console.log(this.ruleForm);
      this.editor.txt.html(`${this.ruleForm.introduce}`)

// 标签
      this.ruleForm.strArr=this.ruleForm.tag.split(",")
      this.dynamicTags=this.ruleForm.strArr;

    },
  }
</script>